<template>
    <div :class="`bag-hot-recommend ${mode}`">
        <div class="recommend-title">
            <span class="one" :style="`background-color: ${theme};`"></span>
            <span class="two" :style="`background-color: ${theme};`"></span>
            <span class="name title-color">热门推荐 </span>
            <span class="two" :style="`background-color: ${theme};`"></span>
            <span class="one" :style="`background-color: ${theme};`"></span>
        </div>
        <div class="recommend-content">
            <Row class="content" gutter="16">
                <template v-for="(item, index) in list">
                    <Col span="12" :key="index">
                        <GoodsListItem :itemInfo="item" :key="index" @addToBag="addToBag" :isBrand="isBrand" :mode="mode" :theme="theme" :styleMode="styleMode" />
                    </Col>
                </template>
            </Row>
        </div>
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Row, Col } from 'vant';
import GoodsListItem from '../components/GoodsListItem';
import ChooseGoods from '../components/ChooseGoods';
import { getBrandNameCookie } from '@biztools/info';

import { TipSuccess } from '@common/tip';
import ModeMixin from '@common/mixin';
import logger from '@common/logger';
import EventBus from '@common/eventBus';

export default {
    name: 'BagHot', // 热门推荐
    mixins: [ModeMixin],
    components: {
        Row,
        Col,
        GoodsListItem,
        ChooseGoods,
    },
    props: {
        list: {
            type: Array,
            default() {
                return [];
            },
        },
        isBrand: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            goodsDetail: null,
        };
    },
    computed: {
        ...mapState({
            shopIndexLibraryInfo: state => state.shop.shopIndexLibraryInfo,
        }),
    },
    methods: {
        ...mapActions([
            'getGoodsAllInfo',
            'addShopBagItem',
        ]),
        async addToBag(item) {
            this.goodsDetail = item;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
        },
        async ensureChoose(skuInfo) {
            logger.info('BagHot => 选择的商品规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
                store_id: 0,
                store_name: getBrandNameCookie(),
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                this.$emit('refresh');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
.bag-hot-recommend {
    .mode-white();
    &.black {
        .recommend-content {
            .linear-bottom(@black-bg-color, @black);
        }
    }
    .recommend-title {
        .p(@shop-gap-lg);
        .flex-row-center();
        .one,
        .two {
            height: 12px;
            width: 4px;
            border-radius: 2px;
            transform: rotate(30deg);
            .m-h(2);
        }
        .one {
            opacity: .3;
        }
        .two {
            opacity: .7;
        }
        .name {
            font-size: @font-size-md;
            font-weight: 500;
            color: @text-color;
            .m-h(@shop-gap-sm);
        }
    }
    .recommend-content {
        .p-h(@shop-gap-md);
    }
}
</style>
